<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户登录</title>
    <link rel="stylesheet" href="./css/login.css">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

</head>

<body>
    <div id="box">
        <section class="regis">
            <div class="title">
                <h3>第二届潇湘武林大会</h3>
            </div>
            <div class="box3">
                <div class="box1">
                    <div class="input">
                        <!-- <img src="../images/用户.png" style="width: 30px;height: 30px;"> -->
                        <span class="ipttext"><img src="./images/user.png" alt=""></span>
                        <input v-model="user.username" class="username" placeholder="请输入您的用户名" required>
                    </div>
                    <div class="input">
                        <!-- <img src="../images/密码.png" style="width: 30px;height: 30px;"> -->
                        <span class="ipttext"><img src="./images/psw.png" alt=""></span>
                        <input v-model="user.password" class="password" id="password" placeholder="请输入您的密码"
                            type="password" required>
                    </div>
                    <div class="inputs">
                        <!-- <img src="../images/密码.png" style="width: 30px;height: 30px;"> -->
                        <span class="ipttexts"><img src="./images/yzm.png" alt=""></span>
                        <input class="verificationcode" id="verificationcode" placeholder=""
                            style="border: 0;width: 100%;" type="text" required>
                        <!-- <a href="#" onclick="change()" style="font-size: 12px;">看不清请换一张?</a> -->
                    </div>
                    <div class="yzmimg">
                        <img src="../login/images/yzmimg.png" id="checkedText"></img>
                        <a href="#" @click="change">换一张</a>
                    </div>

                    <div class="register" @click="login">
                        <img src="./images/register.png" alt="" style="width: 20px;" class="regimg">
                        <button type="submit" class="regbtn" id="button">登录</button>

                    </div>
                </div>

                <div class="toreg">
                    我没有账号，点击<a href="../register/register.html">【注册】</a>
                </div>
            </div>
        </section>

        <el-button v-if="el" :plain="true" @click="open">打开消息提示</el-button>
    </div>
</body>

</html>
<script src="../../js/axios.min.js"></script>
<script src="../../js/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>


<script>
    new Vue({
        el: '#box',
        data: function () {
            return {
                user: {
                    username: '',
                    password: ''
                },
                el: false

            }
        },
        methods: {
            login() {
                // console.log(1);
                axios({
                    url: 'http://localhost:3002/competition/user/login',
                    method: 'post',
                    data: this.user
                }).then(res => {
                    // console.log(res.data);
                    if (res.success === true) {
                        alert('登录成功')
                    } else {
                        alert(res.data.msg)
                    }
                })
            },

            change() { },

            open() {
                this.$message('这是一条消息提示');
            },
        }
    })

</script>